import React from 'react';
import { connect } from 'react-redux';
import { Link } from "react-router";
import Util from '../../utils/Util';
import {setCommonSystemLoading} from '../../action/Action';
import { UserLogin } from "../../action/ActionUser";
import * as DataName from "../../action/DataNameConfig";
import { ForgetPassword } from "../user/PasswordModal";
import { Form, Icon, Input, Button,Spin} from 'antd';
const FormItem = Form.Item;

class Login extends React.Component {
    constructor(props){
        super(props);
        Util.resetWindowTitle({saasOrg:{dept_name:DataName.SYSTEM_CONFIG_TITLE + " | 登录"}},0);
        this.openForgetPassword=()=>{
            let { dispatch } = this.props;
            dispatch(setCommonSystemLoading(DataName.BASE_MODAL,true));
        }
    }
    handleSubmit = (e) => {
        e.preventDefault();
        let {dispatch} = this.props;
        this.props.form.validateFields((err, values) => {
            if (!err) {
                dispatch(setCommonSystemLoading(DataName.FORM_SPIN_LOADING,true));
                dispatch(UserLogin(values))
            }
        });
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        let {CommonSystem} = this.props;
        return (
            <div className="login-page">
                <div className="login-form" >
                    <Spin spinning={CommonSystem[DataName.FORM_SPIN_LOADING] || false} tip="正在登录">
                        <div className="login-logo">
                            <span>{DataName.SYSTEM_CONFIG_TITLE}</span>
                        </div>
                        <p className="logo-desc">科学家在线提供</p>
                        <Form onSubmit={this.handleSubmit}>
                            <FormItem>
                                {getFieldDecorator('mobile', {
                                    rules: [{ required: true, message: '请输入手机号!' }],
                                })(
                                    <Input size="large" prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="手机号" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('password', {
                                    rules: [{ required: true, message: '请输入密码!' }],
                                })(
                                    <Input size="large" prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="密码" />
                                )}
                            </FormItem>
                            <FormItem>
                                <Button type="primary" size="large" htmlType="submit" className="login-form-button" style={{width: '100%'}}>
                                    登录
                                </Button>
                                {/*<Link onClick={this.openForgetPassword} className="rig_links">忘记密码？</Link>*/}
                            </FormItem>
                        </Form>
                    </Spin>
                </div>
                <ForgetPassword />
            </div>
        );
    }
}
var Main = Form.create()(Login);
export default connect(state=>({
    User: state.User,
    CommonSystem: state.CommonSystem
}))(Main);